import { rankAreaRecord } from '@/services/api/api-assess-month-emphasize-rank';
import { ActionType, DrawerForm, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Space, Tag } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface RankAreaRecordProps {
  dataReleaseTimes: string[];
}

const RankAreaRecord: React.FC<RankAreaRecordProps> = ({ dataReleaseTimes }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [activeKey, setActiveKey] = useState<React.Key>('2000');

  const columns: ProColumns<AssessMonthEmphasizeRankData.RecordRankArea>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          {activeKey == '2000' ? '媒体单位' : '区域'}
        </span>
      ),
      dataIndex: 'areaName',
      align: 'center',
      width: '150px',
      render: (dom, entity, index, action) => {
        let color = '';

        if (
          entity.dataReportType1Count == 0 &&
          entity.dataReportType2Count == 0 &&
          entity.dataReportType3Count == 0
        ) {
          color = 'red';
        }

        if (activeKey == '2000') {
          return (
            <span
              style={{
                color: color,
              }}
            >
              {entity.appointSourceOrganizationNames?.map((item) => item)}
            </span>
          );
        } else {
          return (
            <span
              style={{
                color: color,
              }}
            >
              {entity.areaName}
            </span>
          );
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好报道
        </span>
      ),
      dataIndex: 'dataReportType1Count',
      align: 'center',
      width: '150px',
      render: (dom, entity, index, action) => {
        if (entity.dataReportType1Count == 0) {
          return '';
        } else {
          return <Tag color={'blue'}>{entity.dataReportType1Count}</Tag>;
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好评论
        </span>
      ),
      dataIndex: 'dataReportType2Count',
      align: 'center',
      width: '150px',
      render: (dom, entity, index, action) => {
        if (entity.dataReportType2Count == 0) {
          return '';
        } else {
          return <Tag color={'cyan'}>{entity.dataReportType2Count}</Tag>;
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          好创意报道
        </span>
      ),
      dataIndex: 'dataReportType3Count',
      align: 'center',
      width: '150px',
      render: (dom, entity, index, action) => {
        if (entity.dataReportType3Count == 0) {
          return '';
        } else {
          return <Tag color={'green'}>{entity.dataReportType3Count}</Tag>;
        }
      },
    },
  ];

  return (
    <>
      <DrawerForm
        key="add_assess_emphasize_record_drawer_form"
        title={`发稿情况：${dataReleaseTimes.map((item) => item)}`}
        drawerProps={{
          width: 800,
          // maskClosable: false,
          destroyOnClose: true,
        }}
        layout="horizontal"
        trigger={<Button type="primary">发稿情况</Button>}
        submitter={false}
      >
        <ProTable<AssessMonthEmphasizeRankData.RecordRankArea>
          columns={columns}
          actionRef={actionRef}
          rowKey="id"
          request={async (params = {}, sorter) => {
            const response = await rankAreaRecord({
              ...params,
              dataReleaseTimes: dataReleaseTimes,
              datahubLevelIds: [activeKey],
            });
            return {
              data: response.data,
              success: true,
              total: response.data?.length,
            };
          }}
          dateFormatter="id"
          defaultSize={'small'}
          pagination={false}
          search={false}
          options={{
            density: false,
            setting: false,
          }}
          ghost
          toolbar={{
            menu: {
              type: 'tab',
              activeKey: activeKey,
              items: [
                {
                  key: '2000',
                  label: <span>市属媒体</span>,
                },
                {
                  key: '3000',
                  label: <span>区县媒体</span>,
                },
              ],
              onChange: (key) => {
                setActiveKey(key as string);
                actionRef.current?.reloadAndRest();
              },
            },
            filter: <Space></Space>,
          }}
        />
      </DrawerForm>
    </>
  );
};
export default RankAreaRecord;
